<template>
    <div class="asset-h5">
        <div class="asset-h5-item">
            <span>资产编号：</span>
            <span>{{detailInfo.identifier}}</span>
        </div>
        <div class="asset-h5-item">
            <span>资产名称：</span>
            <span>{{detailInfo.name}}</span>
        </div>
        <div class="asset-h5-item">
            <span>购买时间：</span>
            <span>{{detailInfo.buy_time}}</span>
        </div>
        <div class="asset-h5-item">
            <span>分类：</span>
            <span>{{detailInfo.type_name}}</span>
        </div>
        <div class="asset-h5-item">
            <span>信息（品牌/型号）：</span>
            <span>{{detailInfo.brand}}</span>
        </div>
        <div class="asset-h5-item">
            <span>数量：</span>
            <span>{{detailInfo.number}}</span>
        </div>
        <div class="asset-h5-item">
            <span>单位</span>
            <span>{{detailInfo.unit}}</span>
        </div>
        <div class="asset-h5-item">
            <span>单件价格（元）：</span>
            <span>{{detailInfo.price}}</span>
        </div>
        <div class="asset-h5-item">
            <span>总购入价格（元）：</span>
            <span>{{detailInfo.total_price}}</span>
        </div>
        <div class="asset-h5-item">
            <span>存放点：</span>
            <span>{{detailInfo.place}}</span>
        </div>
         <div class="asset-h5-item">
            <span>归属：</span>
            <span>{{detailInfo.owner}}</span>
        </div>
         <div class="asset-h5-item">
            <span>保管人：</span>
            <span>{{detailInfo.manager}}</span>
        </div>
         <div class="asset-h5-item">
            <span>保管人联系方式:</span>
            <span>{{detailInfo.mobile}}</span>
        </div>
         <div class="asset-h5-item">
            <span>资产图片：</span>
            <img @click="imgVisible = true" :src="BASE_URL + detailInfo.thumb" alt="资产图片">
        </div>
         <div class="asset-h5-item">
            <span>备注：</span>
            <span>{{detailInfo.comment}}</span>
        </div>
        <div class="asset-h5-bottom"></div>

        <el-dialog
            :visible.sync="imgVisible"
            class="asset-h5-img">
            <img :src="BASE_URL + detailInfo.thumb" alt="资产图片">
        </el-dialog>
    </div>
</template>

<script>
import defaultImg from './../../../static/image/affairs/asset/asset-default.png.png';

export default {
    data() {
        return {
            imgVisible: false,
            detailInfo: {} // 资产信息
        }
    },
    created() {
        // 本地调试
        // http://172.16.20.178:8083/admin/asset-h5/9?host=172.16.45.4
        this.remSize();
        window.onresize = this.remSize;

        this.getDetail();
        this.getTitle();
    },
    methods: {
        /**
         * 获取网站图标和标题
         */
        getTitle() {
            let success = ( data => {
                if (!is_empty(data.data)) {
                    sessionStorage.setItem('siteTitle', data.data.name);
                    sessionStorage.setItem('siteIcon', (this.BASE_URL + data.data.path));
                    document.title = data.data.name;

                    let link = document.querySelector("link[rel*='icon']") || document.createElement('link');
                    link.type = 'image/x-icon';
                    link.rel = 'shortcut icon';
                    link.href = this.BASE_URL + data.data.path;
                    document.getElementsByTagName('head')[0].appendChild(link);
                }
            });
            let fail = ( data => {
                this.$message.error(data.msg);
            })
            
            this.$ajax.get('api/setting/browser_set', {params: {}, headers:{DecisionPlatform:'home'}, func: {success: success, fail: fail}})
        },
        /**
         * 重置根元素 HTML 的字体样式
         */
        remSize(){
            let windth = document.documentElement.clientWidth / 7.5;
            let domE1 = document.getElementsByTagName("html")[0];

            domE1.style.fontSize = windth + "px";
            domE1.style.background = '#fff';
            domE1.style.minWidth = 'initial';
            document.body.style.minWidth = 'initial';
        },
        /**
         * 获取资产详细信息
         */
        getDetail() {
            let success = (res => {
                this.detailInfo = res.data;

                if (is_empty(this.detailInfo.thumb)) {
                     this.detailInfo.thumb = defaultImg;
                }
            })

            this.$ajax.get('api/property/single', {params: {id: this.$route.params.id},headers:{DecisionPlatform:'home'}, func:{success: success}})
        },
    }
}
</script>

<style lang="scss">
    .asset-h5 {
       background: #fff;

        .asset-h5-item {
            display: flex;
            margin: 0 0.34rem;
            padding: 0.24rem 0;
            border-bottom: 1px solid #F6F6F6;
            box-sizing: border-box;

            span {
                font-family: PingFangSC-Regular; 
            }

            >span:first-child {
                width: 3rem;
                font-size: 0.28rem;
                color: #666;
            }

            >span:last-child {
                flex: 1;
                width: 0;
                font-size: 0.28rem;
                word-break: break-all;
                word-wrap: break-word;
                white-space: pre-wrap;
            }

            img {
                width: 1.8rem;
                height: 1.8rem;
                background: #E0F6FF;
                object-fit: cover;
            }
        }

        .asset-h5-img {
            display: flex;
            justify-content: center;
            align-items: center;

            .el-dialog {
                margin: 0;
                width: 6.2rem;
                height: 6.2rem;

                .el-dialog__header {
                    display: none;
                } 

                .el-dialog__body {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0;
                    width: 100%;
                    height: 100%;
                    background: #E0F6FF;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }
            }
        }

        .asset-h5-bottom {
            height: 0.62rem;
            background: #EFEFEF;
        }
    }
</style>